<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>IssueB</title>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="./js/echarts/echarts.min.js"></script>
    <script src="./js/jquery.min.js"></script>
    <script src="./js/vue.js"></script>
    <script src="./js/cookie.min.js"></script>
    <link rel="stylesheet" href="./css/bootstrap.min.css">
    <link rel="stylesheet" href="./css/common.css">
    <script src="js/bootstrap.min.js"></script>
    <script src="js/common.js"></script>
</head>
<body>
<nav class="navbar navbar-default">
    <div class="container-fluid">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#">中国与东盟十国合作关系</a>
        </div>

        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav">
                <li><a href="/issue_A.html">与东盟十国合作态势变化（年份-学科）<span class="sr-only">(current)</span></a></li>
                <li class="active"><a href="/issue_B.html">与东盟十国的合作态势（年份-国家）</a></li>
                <li><a href="/issue_C.html">与东盟十国的合作态势（地图）</a></li>
                <li><a href="/issue_D.html">发文机构占比</a></li>
                <li><a href="/issue_G.html">各东盟在核心领域的作者</a></li>
            </ul>
        </div><!-- /.navbar-collapse -->
    </div><!-- /.container-fluid -->
</nav>
<div id="app">
    <div id="issue_b" class="item"></div>
</div>
</body>
<script>
    let app = new Vue({
        el: "#app",
        data: {
            issue_b: {
                data: {
                    xAxis: [],
                    category: [],
                    details: [],
                    selected: {}
                }
            }
        },
        methods: {
            req: async function (addr, target) {
                let e = await reqXXX("/issue_b", target);
                let obj = JSON.parse(e.currentTarget.responseText);
                let s = new Set();
                let d = target.data;
                Object.keys(obj).forEach(function (key) {
                    target.data.category.push(key);
                    Object.keys(obj[key]).forEach(function (k) {
                        s.add(k);
                    })
                })
                //console.log("susp: ", s);
                let l = [];
                for (let item of s) {
                    l.push(item);
                    //
                }
                console.log(l.sort());
                for (let i = 0; i < l.length; i++) {
                    target.data.xAxis.push(l[i]);
                }
                // console.log("obj: ", obj["brunei"]["2001"]);
                for (let item of target.data.category) {
                    target.data.details.push([]);
                    Object.keys(d.xAxis).forEach(function (key) {
                        console.log(d.xAxis[key], item, obj[item][d.xAxis[key]]);
                        target.data.details[target.data.details.length - 1].push(obj[item][d.xAxis[key]]);
                    })
                }
                target.eChart.setOption({
                    xAxis: {data: d.xAxis},
                    series: this.series(target),
                    legend: {data: d.category, selected: d.selected}
                });
            },
            series: function (target) {
                // console.log("series: ", target);
                let tmp = [];
                let d = target.data;
                console.log("dxxx.details: ", d.details.length);
                for (let i = 0; i < d.details.length; i++) {
                    tmp.push({
                        name: d.category[i],
                        type: 'line',
                        center: ["50%", "10%"],
                        stack: "",
                        data: d.details[i],
                        itemStyle: {},
                        emphasis: {
                            focus: "series"
                        }
                    });
                }
                console.log("tmp: ", tmp);
                return tmp;

            }
        },
        mounted: function () {
            this.req("/issue_b", this.issue_b);
            initEcharts(this.issue_b, document.getElementById("issue_b"), "广东与东盟十国合作态势", this.series)
        },
        computed: {}
    })
</script>
</html>